<template>
	<!--员工扫码核销页面-->
	<view>
		<swiper>
			<block>
				<swiper-item>
					<image class="slide-image" width="355" height="150" />
				</swiper-item>
			</block>
		</swiper>
		<view class='qcode_outer' @click='goscan()'>
			<view class='qcode_inner'>
				<image class="qrcode_image" src='../../static/images/qrcode.png'></image>
				<text class='qcode_text'>请扫描买家核销二维码</text>
			</view>
		</view>
		<view class="form">
			<view>扫不出来试试手动输入订单编号</view>
			<view class="username">
				<input placeholder="请输入订单编号" v-model="orderId" placeholder-style="color: #ccc;" />
			</view>
			<view class="res btn">
				<view @click="wbarcode">输入订单编号核销</view>
			</view>
			<button style="margin-top: 40rpx;" @click="exitLogin">退出登录</button>
		</view>
	</view>
</template>

<script>
import {
	mapMutations
} from 'vuex'
export default {
	data() {
		return {
			orderId: '',
		}
	},
	onBackPress(event) {
		console.log(event);

		return uni.redirectTo({
			url: '/pages/public/resetpwd'
		})
	},
	onPullDownRefresh() { },
	methods: {
		...mapMutations('goods', ['setHxOrderList']),
		...mapMutations('user', ['setToken', 'setUserInfo',]),
		exitLogin() {
			this.setToken('');
			this.setUserInfo({});
			uni.removeStorageSync('token');
			uni.removeStorageSync('userinfo');
			return uni.navigateTo({
				url: '/pages/public/login'
			})
		},
		wbarcode() {
			if (!this.orderId) {
				this.$toast('请输入订单编号');
				return;
			}
			const params = {
				status: '已支付',
				page: 1,
				limit: 1,
				orderid: this.orderId
			};
			this.$ajax.get('orders/page', params).then(data => {
				if (data.success) {
					console.log(data.result);
					this.setHxOrderList(data.result);
					console.log(data.result);
					return uni.navigateTo({
						url: '/pages/product/search'
					})

				} else {
					this.$toast('订单不存在');
				}
			})
		},

		goscan() {
			const that = this;
			uni.scanCode({
				scanType: 'qrcode',
				success: function (res) {
					if (res.result) {
						that.orderId = res.result;
						this.wbarcode();
					} else {
						that.$toast('扫码失败');
					}
				},
				fail: function () {
					that.$toast('扫码失败');
				}
			});
		},
		//#ifdef H5

		//#endif


	}
}
</script>

<style lang="scss">
@import "../../static/css/common.scss";

/**index.wxss**/
uni-modal .uni-modal__bd {
	white-space: pre-wrap;
}


.qcode_outer {
	width: 320rpx;
	height: 320rpx;
	border-radius: 160rpx;
	background: #FCE9BC;
	margin: 60rpx auto 0px auto;
	overflow: hidden;
}

.qcode_inner {
	width: 280rpx;
	height: 280rpx;
	border-radius: 140rpx;
	background: #F5BA47;
	margin: 20rpx auto 0px auto;
	overflow: hidden;
	color: #fff;
}

.qcode_inner image {

	height: 140rpx;
	width: 140rpx;
	margin: 30rpx auto 10rpx auto;
	display: block;

}

.qcode_inner text {
	width: 180rpx;
	text-align: center;
	margin: 0rpx auto;
	display: block;
	font-size: 36rpx;
}

/* 底部栏 */
.action-section1 {
	/* #ifdef H5 */
	margin-bottom: 230upx;
	/* #endif */

	/* #ifndef H5 */
	margin-bottom: 80upx;
	/* #endif */
	position: fixed;
	left: 100upx;
	bottom: 35upx;
	z-index: 99;
	display: flex;
	padding: 0 50upx;

	.tip-btn {
		padding: 0 30upx;
		margin: 0;
		border-radius: 10px;
		height: 70upx;
		line-height: 70upx;
		font-size: $font-lg;
		background: $nav-text;
		color: $nav-bg;
		border: 2upx solid $nav-color-blue;
	}
}

page {
	background: #FFFFFF;
	height: 100%;
}

.icon {
	color: #ffffff;
}

.logo {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	.img {
		width: 200rpx;
		height: 200rpx;
		margin: 50rpx 0;

		image {
			width: 100%;
			height: 100%;
			border-radius: 100%;
			border: 1px solid $base-color;
		}
	}
}

.form {
	width: 100%;
	padding: 8px 7%;
	font-size: 30rpx;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.username {
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
		border-radius: 45upx;
		background-color: #FFFFFF;
		border: 1px solid $base-color;
		padding: 0 45upx;
		box-sizing: border-box;
		margin-bottom: 26upx;


		input {
			width: 100%;
			height: 50upx;
			color: $font-color-000;
			font-weight: 200;
			font-size: $font-lg;
		}
	}

	.btn {
		color: #FFFFFF;
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20upx;
		background-color: $nav-bg;
		font-size: $font-lg;
	}
}

.re {
	.username {
		position: relative;

		.get-code {
			position: absolute;
			height: 90upx;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 0;
			padding: 0 40upx;
			z-index: 3;

			&:after {
				content: " ";
				width: 2upx;
				height: 50upx;
				background-color: $nav-bg;
				position: absolute;
				z-index: 3;
				margin-right: 100%;
				left: 0;
				top: 20upx;
			}
		}
	}

	.res {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100upx;
	}
}
</style>